<template>
  <div class="pages stockinventoryTaking">
    <div class="pageLevel">
        <el-form  label-width="90px" class="demo-ruleForm">
            <div class="tableSearch">
          <el-form-item label="盘点模式:" label-width="100px" >
            <span>{{inventoryPattern}}</span>
          </el-form-item>
          <el-form-item label="盘点类型:" label-width="300px">
            <span>{{inventoryType}}</span>
          </el-form-item>
          <el-form-item label="盘点仓库:" class="billdata" label-width="300px">
            <span>{{warehouseName}}</span>
          </el-form-item>
          </div>
      <!-- 表格 -->
      <div class="tableMain">
          <el-table :data="completeGoodsList" stripe style="width: 100%">
                 <el-table-column prop="goodsCode"  label="商品货号" align="center">
                 </el-table-column>
                 <el-table-column prop="barCode" label="商品条码" align="center">
                 </el-table-column>
                 <el-table-column prop="goodsName" label="商品名称" align="center">
                 </el-table-column>
                 <el-table-column prop="goodsSpec" label="规格型号" align="center">
                   <template slot-scope="scope">
                     <div v-for="(item, index) in  scope.row.goodsSpec" :key="index">
                       <span v-if="item!=null">{{item.paramName}} :</span>
                       <span v-if="item!=null">{{item.paramValue}} </span>
                    </div>
                  </template>
                 </el-table-column>
                 <!-- 集团订单新加功能5/31 -->
                <el-table-column prop="dateInProduced" label="生产日期" :formatter="dateInProduced" align="center" width="100"></el-table-column>
                 <el-table-column prop="goodsBatchNumber" label="商品批次" align="center">
                 </el-table-column>
                 <el-table-column prop="unitName" label="单位" align="center">
                 </el-table-column>
                  <el-table-column v-if="type=='1'" prop="skuNum" label="当前库存余额" align="center">
                 </el-table-column>
                 <el-table-column prop="goodsNum" align="center" label="盘点数量" width="150">
                 <template slot-scope="scope">
                   <input  class="input" v-model="scope.row.goodsNum" size="mini" type="text" style="width:100px" value="1" min="1" maxlength="6" oninput="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else if(this.value){this.value=parseInt(this.value.replace(/\D/g,''))}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
                   </template>
                 </el-table-column>
               </el-table> 
        </div>
        <el-form-item label="盘点备注:" prop="listcontent" style="margin-top:30px;">
            <textarea onkeyup="this.value=this.value.replace(/^ +| +$/g,'')" v-model="inventoryRemarks" placeholder="请输入备注" name="" id="" cols="10" rows="5" maxlength="100" style="width:450px;resize:none">
          </textarea>
        </el-form-item>
      <!-- 提交 -->
       <div class="buttonstyle">
           <el-button size="small" style="margin-top: 12px;"  @click="cancel">取消</el-button>
           <el-button type="primary" size="small"  v-if="submitDisplay" style="margin-top: 12px;"   @click="submission">提交</el-button>
       </div>
       </el-form>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from '@/util'
import { updateInventoryStatus,inventoryDetails ,inventoryGoodsNum} from "@/api";
export default {
  computed: mapState([, "merchantId","power"]),
  data() {
    return {
      completeGoodsList:[{}],//商品列表
      type:"",//盘点属于名盘还是盲盘
      inventoryType:"",//盘点类型
      warehouseName:"",//仓库名称
      iventoryStatus:"",//单据状态
      inventoryPattern:"",//盘点模式
      inventoryRemarks:"",//盘点备注,
      submitDisplay:true
    };
  },
 created() {
    this.type = util.getQuery('type');
    if(util.getQuery('status')=="0"){
      this.inventoryStateChange()
    }else{
      this.inventoryList();
    }
  },
  mounted() {
   
    
  },
  methods: {
      //配置权限
    setRole (key) {
      return util.selectTitle(this.power, key)
     },
    //转时间戳
    dateInProduced(row, column) {
      return util.foryear(row.dateInProduced)
    },
    //  开始盘点接口
    inventoryStateChange(){
       updateInventoryStatus({
         id:util.getQuery('id'),
         inventoryStatus:"1",
         auditRemark:""
       }).then(res=>{
         if(res.code=="200"){
           this.submitDisplay=true
           this.inventoryList();
         }else{
           this.submitDisplay=false
         }
          
       })
    },
    // 盘点单详情
    inventoryList() {
      inventoryDetails({
        id:util.getQuery('id'),
      }).then(res => {
        if(res.data.inventoryPattern=="0"){
          this.inventoryPattern="盲盘"
        }else if(res.data.inventoryPattern=="1"){
          this.inventoryPattern="明盘"
        }
        if(res.data.inventoryType=="0"){
          this.inventoryType="日盘"
        }else if(res.data.inventoryType=="1"){
          this.inventoryType="周盘"
        }else{
          this.inventoryType="月盘"
        }
        this.warehouseName=res.data.warehouseName;
        this.completeGoodsList = res.data.goodsList;
        this.submitDisplay=true
      });
    },
    // 取消
    cancel(){
       history.back();
    },
    // 提交
    submission(){
       let goodsList = this.completeGoodsList.map(function(item) {
        return {
          id: item.id,
          goodsNum: item.goodsNum,
          skuNum: item.skuNum,
        };
       });
       inventoryGoodsNum({  
        goodsList:JSON.stringify(goodsList),
        inventoryId:util.getQuery('id'),
        inventoryRemark:this.inventoryRemarks,
        inventoryStatus:'2',
      }).then(res=>{
          if(res.code==200){
            history.back();
          }
      })
    }

  }
};
</script>
<style scoped>
.buttonstyle{
    width:80%;
    text-align: right;
    margin-top:100px;
}
.billdata .el-date-editor .el-range__close-icon {
  display: none;
}
</style>
